<template>
  <div class="container">
    <div class="search-container">
      <div class="start-time" @click="handleShowSelectedDate(1)">{{ queryParams.startTime }}</div>
      <div class="line">-</div>
      <div class="end-time" @click="handleShowSelectedDate(2)">{{ queryParams.endTime }}</div>
    </div>
    <div class="list-container">
      <van-pull-refresh v-model="refreshing" v-model:loading="loading" @refresh="onRefresh">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          finished-text="没有更多了"
          @load="getList"
        >
          <van-swipe-cell v-for="(item,index) in list" :key="item" >
            <van-cell :title="item.rq" arrow-direction="right" :value="item.inputStatus"/>
            <template #right>
              <van-button square type="danger" text="删除" @click="handleDelRow(index)"/>
              <van-button square type="primary" text="修改" @click="handleInputLog(item)" />
            </template>
          </van-swipe-cell>
        </van-list>
      </van-pull-refresh>
    </div>
    <van-action-sheet v-model:show="show" :title="null">
      <van-date-picker
        v-model="currentDate"
        title="选择日期"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="handleConfirmSelectDate"
        @cancel="handleCancelSelectDate"
      />
    </van-action-sheet>
  </div>
</template>

<script setup>

import { onMounted, reactive, ref, toRaw } from 'vue'
import { delLogsApi, myCompleteLogsApi } from '@/api/workLog.js'
import dayjs from 'dayjs'
import { useRouter } from 'vue-router'
import { showConfirmDialog } from 'vant';

const show = ref(false)
const title = ref('选择日期')
const queryParams = reactive({
  startTime: dayjs().subtract(1, 'month').format('YYYY-MM-DD'),
  endTime: dayjs().format('YYYY-MM-DD'),
  pageSize:20,
  pageNum:1
})
const list = ref([])
const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)
const currentDate = ref(dayjs().format('YYYY-MM-DD').split('-'))
const minDate = ref(new Date(dayjs().subtract(1,'year').format('YYYY-MM-DD')))
const maxDate = ref(new Date(dayjs().format('YYYY-MM-DD')))
const dateType = ref(1)
const router = useRouter()


const handleDelRow = (index) => {
  showConfirmDialog({
    title: '提示',
    message:'确认删除吗?',
  })
    .then(() => {

      delLogsApi(list.value[index].id).then(()=>{
        list.value.splice(index, 1)
      })
    })
    .catch(() => {
      // on cancel
    });

}
const handleInputLog = (row) => {
  router.push(`/addWorkLog?date=${row.rq}`)
}

const handleConfirmSelectDate = (e) => {
  if (dateType.value === 1) {
    queryParams.startTime = e.selectedValues.join('-')
  } else if (dateType.value === 2) {
    queryParams.endTime = e.selectedValues.join('-')
  }
  show.value = false
  getList()
}
const handleCancelSelectDate = () => {
  show.value = false
}
const handleShowSelectedDate = type => {
  if (type === 1) {
    // 选择开始时间
    title.value = '选择开始日期'
    show.value = true
    // 最小值为本年度第一天
    currentDate.value = dayjs(queryParams.startTime).format('YYYY-MM-DD').split('-')
  } else if (type === 2) {
    // 选择结束时间
    title.value = '选择结束日期'
    show.value = true
    currentDate.value = dayjs(queryParams.endTime).format('YYYY-MM-DD').split('-')
  }
}

const getList = () => {

  let params = toRaw(queryParams)
  myCompleteLogsApi(toRaw(params)).then(res => {
    let arr = res.rows.map(item => {
      item.inputStatus = dayjs(item.createTime).isSame(item.rq, 'day') ? '正常' : '补录'
      return item
    })
    if (refreshing.value) {
      list.value = []
      refreshing.value = false
    }
    list.value = [...list.value, ...arr]
    loading.value = false
    if(res.rows.length < params.pageSize){
      finished.value = true
    }else{
      queryParams.pageNum = queryParams.pageNum + 1
    }
  })
}

const onRefresh = () => {
  // 清空列表数据
  finished.value = false
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true
  getList()
}
const init = () => {
  // getList()
}

onMounted(() => {
  init()
})
</script>

<style scoped lang="less">
.container {
  width: 100vw;
  height: 100%;

  .search-container {
    width: 100%;
    background-color: #fff;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

    .start-time, .end-time {
      width: 30%;
      text-align: center;
    }
  }

  .list-container {
    margin-top: 10px;
    height: calc(100% - 60px);
    overflow-y: auto;
  }
}

.date-picker-box {
  height: 500px;
}
</style>